<template>
  <div>
    <tvitem :arr="newarr">
      <div class="box">
        <h1>近期值得看的国产剧</h1>
        <ul>
          <li v-for="(item, index) in newarr" :key="index">
            <div class="lef">
              <img :src="item.cover" alt="" />
              <p>{{ item.title }}</p>
              <span>评分：{{ item.rate }}</span>
            </div>
          </li>
        </ul>
      </div>
    </tvitem>
     <tvitem :arr="itemarr">
      <div class="box">
        <h1>近期值得看的综艺节目</h1>
        <ul>
          <li v-for="(item, index) in newarr" :key="index">
            <div class="lef">
              <img :src="item.cover" alt="" />
              <p>{{ item.title }}</p>
              <span>评分：{{ item.rate }}</span>
            </div>
          </li>
        </ul>
      </div>
    </tvitem>
     <tvitem :arr="itearr">
      <div class="box">
        <h1>近期值得看的英美剧</h1>
        <ul>
          <li v-for="(item, index) in newarr" :key="index">
            <div class="lef">
              <img :src="item.cover" alt="" />
              <p>{{ item.title }}</p>
              <span>评分：{{ item.rate }}</span>
            </div>
          </li>
        </ul>
      </div>
    </tvitem>
  </div>
</template>

<script>
import tvitem from "./filmitem.vue";
export default {
  data() {
    return {
      newarr: [],
      itemarr:[],
      itearr:[],
    };
  },
  mounted() {
    this.$axios.get("../../../static/data/tv.json").then((res) => {
      // console.log(res.data.subjects);
      this.newarr = res.data.subjects;
    });
     this.$axios.get("../../../static/data/tv.json").then((res) => {
      console.log(res.data.subjects);
      // this.itemarr = res.data.subjects;
    });
     this.$axios.get("../../../static/data/tv.json").then((res) => {
      // console.log(res.data.subjects);
      // this.itearr = res.data.subjects;
    });
  },
  components: { tvitem },
};
</script>

<style scoped>
</style>